<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧农业管理系统</title>
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>
    <link href="{{ url_for('static', filename='resources/css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='resources/img/favicon.png') }}" type="image/png">
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/css/all.min.css') }}">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/css/quick-website.css') }}">
    <script src="{{ url_for('static', filename='resources/js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/js/bootstrap.min.js') }}"></script>
    <style>
        /* 添加自定义样式 */
        .dropdown-menu {
            display: none;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <!-- Brand -->
            <a class="navbar-brand" href="/index.html">
                <img alt="Image placeholder" src="{{ url_for('static', filename='resources/img/favicon.png') }}" id="navbar-logo">
            </a>
            <!-- Toggler -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Collapse -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mt-4 mt-lg-0 ml-auto">
                    <li class="nav-item ">
                        <a class="nav-link" href="/">主页</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="/greenhouse_management">温室管理</a>
                    </li>
                    <li class="nav-item dropdown dropdown-animate" data-toggle="hover">
                        <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">id</a>
                        <div class="dropdown-menu" aria-labelledby="userDropdown" id="userDropdownMenu">
                    <!-- 动态生成的内容 -->
                </div>
                    </li>
                    <li class="nav-item dropdown dropdown-animate" data-toggle="hover">

                    </li>
                </ul>
                <!-- Mobile button -->
                <div class="d-lg-none text-center">
                    <a href="https://webpixels.io/themes/quick-website-ui-kit" class="btn btn-block btn-sm btn-warning">See more details</a>
                </div>
            </div>
        </div>
    </nav>
        <!-- 主页内容 -->
    <section class="slice py-7">
        <div class="container">
            <div class="row row-grid align-items-center">
                <div class="col-12 col-md-5 col-lg-6 order-md-2 text-center">
                    <!-- Image -->
                    <figure class="w-100">
                        <img alt="Image placeholder" src="{{ url_for('static', filename='resources/img/daotian.png') }}" class="img-fluid mw-md-120">
                    </figure>
                </div>
                <div class="col-12 col-md-7 col-lg-6 order-md-1 pr-md-5">
                    <!-- Heading -->
                    <h1 class="display-4 text-center text-md-left mb-3">
                        现在开始管理您的<strong class="text-primary">智慧大棚</strong>吧
                    </h1>
                    <!-- Text -->
                    <p class="lead text-center text-md-left text-muted">
                        基于云端控制的智慧大棚后台控制系统
                    </p>
                    <!-- Buttons -->
                    <div class="text-center text-md-left mt-5">
                        <a href="/greenhouse_management" class="btn btn-primary btn-icon" target="_blank">
                            <span class="btn-inner--text">数据可视化</span>
                            <span class="btn-inner--icon"><i data-feather="chevron-right"></i></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg">
        <div class="container">
            <div class="py-6">
                <div class="row row-grid justify-content-between align-items-center">
                    <div class="col-lg-5 order-lg-2">
                        <h5 class="h3">实时检测大棚内数据</h5>
                        <p class="lead my-4">
                            通过云端+实地传感器实时传输数据
                        </p>
                    </div>
                    <div class="col-lg-6 order-lg-1">
                        <div class="card mb-0 mr-lg-5">
                            <div class="card-body p-2">
                                <img alt="Image placeholder" src="{{ url_for('static', filename='resources/img/tubiao.png') }}" class="img-fluid shadow rounded">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="py-6">
                <div class="row row-grid justify-content-between align-items-center">
                    <div class="col-lg-5">
                        <h5 class="h3">可以随时查看近期的数据变化</h5>
                        <p class="lead my-4">
                            通过自动记录数据将近期的数据变换可视化
                        </p>
                    </div>
                    <div class="col-lg-6">
                        <div class="card mb-0 ml-lg-5">
                            <div class="card-body p-2">
                                <img alt="Image placeholder" src="{{ url_for('static', filename='resources/img/kongzhi.png') }}" class="img-fluid shadow rounded">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script src="{{ url_for('static', filename='resources/js/bootstrap.bundle.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/js/svg-injector.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/js/feather.min.js') }}"></script>
    <!-- Quick JS -->
    <script src="{{ url_for('static', filename='resources/js/quick-website.js') }}"></script>
    <!-- Feather Icons -->
    <script>
        feather.replace({
            'width': '1em',
            'height': '1em'
        })
    </script>

    <script>
        // 检查用户状态并相应地更新UI
        function is_logged_in() {
            // 假设我们有一个函数来检查用户是否已登录
            $.get('/api/is_logged_in', function(data) {
                if (data === 'Welcome to the dashboard!') {
                    // 用户已登录
                    $('#userDropdownMenu').html(`
                        <a class="dropdown-item" href="/account_management">账户管理</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item logoutLink" href="/api/logout">注销</a>
                    `);
                } else {
                    // 用户未登录
                    $('#userDropdownMenu').html(`
                        <a class="dropdown-item loginLink" href="/login">登录</a>
                        <a class="dropdown-item registerLink" href="/register">注册</a>
                    `);
                }
            });
        }

        // 设置活动超时时间（30分钟）
        const INACTIVITY_TIMEOUT = 30 * 60 * 1000; // 30 minutes in milliseconds

        // 记录最后活动时间
        let lastActivityTime = Date.now();

        // 检测用户活动
        function detectUserActivity() {
            lastActivityTime = Date.now();
        }

        // 注册活动监听器
        document.addEventListener('mousemove', detectUserActivity);
        document.addEventListener('mousedown', detectUserActivity);
        document.addEventListener('keydown', detectUserActivity);
        document.addEventListener('scroll', detectUserActivity);
        document.addEventListener('touchstart', detectUserActivity);
        document.addEventListener('touchmove', detectUserActivity);

        // 定时器用于检查用户是否处于非活动状态
        setInterval(function() {
            const currentTime = Date.now();
            if (currentTime - lastActivityTime > INACTIVITY_TIMEOUT) {
                // 用户超过30分钟未活动
                $.ajax({
                    url: '/api/logout',
                    type: 'GET',
                    success: function() {
                        // 用户已注销
                        window.location.href = '/login';
                    },
                    error: function() {
                        // 错误处理
                        console.error('Failed to log out due to inactivity.');
                    }
                });
            }
        }, 1000 * 60); // 每分钟检查一次

        // 初始化页面
        $(function() {
            is_logged_in(); // 在页面加载时调用以初始化状态
        });
    </script>
</body>
</html>